<template>
	<view>
		<view style="background-color: #fff;">
			<view class="" :style="{height:$store.state.statusBarHeight+'px'}">
			</view>
			<view class="" style="overflow: hidden;height: 120rpx;position: relative;border-bottom: 1px solid #ccc;">
				<view :animation="animationData" :style="{width:$store.state.windowWidths*datalist.length +'px',right:right+'px'}" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend" style="display: flex;position: absolute;height: 100%;  flex-direction: row;align-items: center;justify-content: center;text-align: center;">
					<template v-for="i,index in datalist">
						<view @click="select=i.a" :class="{active:i.a==select}" style="flex: 1;display: flex;flex-direction: column;height: 100%; align-items: center;justify-content: center;">
							<text style="font-size: 30rpx;color: #2A3954;">{{getstr(i).a.week}}-{{getstr(i).a.day}}</text>
							<text style="font-size: 20rpx;color: #2A3954;">{{getstr(i).a.mon}},{{getstr(i).a.year}}</text>
						</view>
						<view @click="select=i.b" :class="{active:i.b==select}" style="flex: 1;display: flex;flex-direction: column;height: 100%;align-items: center;justify-content: center;">
							<text style="font-size: 30rpx;color: #2A3954;">{{getstr(i).b.week}}-{{getstr(i).b.day}}</text>
							<text style="font-size: 20rpx;color: #2A3954;">{{getstr(i).b.mon}},{{getstr(i).b.year}}</text>
						</view>
						<view @click="select=i.c" :class="{active:i.c==select}" style="flex: 1;display: flex;flex-direction: column;height: 100%;align-items: center;justify-content: center;">
							<text style="font-size: 30rpx;color: #2A3954;">{{getstr(i).c.week}}-{{getstr(i).c.day}}</text>
							<text style="font-size: 20rpx;color: #2A3954;">{{getstr(i).c.mon}},{{getstr(i).c.year}}</text>
						</view>
					</template>
				</view>
			</view>
		</view>
		{{right}}
		<view>
			<view class="" style="margin-top: 15rpx;display: flex;flex-direction: row;align-items: center;padding-top: 16rpx;padding-bottom: 16rpx;padding-left: 25rpx;padding-right: 25rpx;">
				<view style="padding-bottom: 10rpx;display: flex;flex-direction: column;justify-content: center;align-items: center;">
					<u--image :showLoading="true" src="/static/done.png" width="48rpx" height="48rpx"></u--image>
					<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
						<text v-for="(item,index) in 11" style="width: 8rpx;height: 8rpx;background: rgb(167,183,211);border-radius: 50%;margin-top: 8rpx;"></text>
					</view>
				</view>
				<view class="" style="flex: 1;margin-left: 20rpx;background-color: #009586;display: flex;flex-direction: column;padding: 25rpx;border-radius: 30rpx;">	
					<text style="color: #FFFFFF;font-size: 20rpx;">07:30 - 09:00</text>
					<text style="color: #FFFFFF;font-size: 24rpx;margin-top: 25rpx;">Patrol around the Homesteader School</text>
					<view style="display: flex;flex-direction: row;align-items: center;justify-content: center;margin-top: 25rpx;">
						<text style="color: #FFFFFF;font-size: 24rpx;flex: 1;">1 hours 30 Minutes</text>
						<text @click="topview" style="color: #009586;background-color: #fff;padding: 8rpx 30rpx;border-radius: 30rpx;font-size: 22rpx;">Done</text>
					</view>
				</view>	
			</view>
			<view class="" style="margin-top: 15rpx;display: flex;flex-direction: row;align-items: center;padding-top: 16rpx;padding-bottom: 16rpx;padding-left: 25rpx;padding-right: 25rpx;">
				<view style="padding-bottom: 10rpx;display: flex;flex-direction: column;justify-content: center;align-items: center;">
					<u--image :showLoading="true" src="/static/progress.png" width="55rpx" height="55rpx"></u--image>
					<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
						<text v-for="(item,index) in 11" style="width: 8rpx;height: 8rpx;background: rgb(167,183,211);border-radius: 50%;margin-top: 8rpx;"></text>
					</view>
				</view>
				<view class="" style="flex: 1;margin-left: 20rpx;background-color: #293855;display: flex;flex-direction: column;padding: 25rpx;border-radius: 30rpx;">	
					<text style="color: #FFFFFF;font-size: 20rpx;">07:30 - 09:00</text>
					<text style="color: #FFFFFF;font-size: 24rpx;margin-top: 25rpx;">Patrol around the Homesteader School</text>
					<view style="display: flex;flex-direction: row;align-items: center;justify-content: center;margin-top: 25rpx;">
						<text style="color: #FFFFFF;font-size: 24rpx;flex: 1;">1 hours 30 Minutes</text>
						<text @click="topview" style="color: #000;background-color: #fff;padding: 8rpx 30rpx;border-radius: 30rpx;font-size: 22rpx;">in Progress</text>
					</view>
				</view>	
			</view>
			<view class="" style="margin-top: 15rpx;display: flex;flex-direction: row;align-items: center;padding-top: 16rpx;padding-bottom: 16rpx;padding-left: 25rpx;padding-right: 25rpx;">
				<view style="padding-bottom: 10rpx;display: flex;flex-direction: column;justify-content: center;align-items: center;">
					<u--image :showLoading="true" src="/static/uocomming.png" width="48rpx" height="48rpx"></u--image>
					<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
						<text v-for="(item,index) in 11" style="width: 8rpx;height: 8rpx;background: rgb(167,183,211);border-radius: 50%;margin-top: 8rpx;"></text>
					</view>
				</view>
				<view class="" style="flex: 1;margin-left: 20rpx;background-color: rgb(167,181,211);display: flex;flex-direction: column;padding: 25rpx;border-radius: 30rpx;">	
					<text style="color: #2A3954;font-size: 20rpx;">07:30 - 09:00</text>
					<text style="color: #2A3954;font-size: 24rpx;margin-top: 25rpx;">Patrol around the Homesteader School</text>
					<view style="display: flex;flex-direction: row;align-items: center;justify-content: center;margin-top: 25rpx;">
						<text style="color: #2A3954;font-size: 24rpx;flex: 1;">1 hours 30 Minutes</text>
						<text @click="topview" style="color: #fff;background-color: rgb(104,124,160);padding: 8rpx 30rpx;border-radius: 30rpx;font-size: 22rpx;">Upcoming</text>
					</view>
				</view>	
			</view>
		</view>
		<u-modal confirmText="YES" cancelText="NO" confirmColor="#009687" cancelColor="#B94545" @confirm="showtap=false" @cancel="showtap=false" :show="showtap" showCancelButton :content='content'></u-modal>
	</view>
</template>

<script>
	var daytime = 24*60*60*1000;
	export default {
		data() {
			return {
				right:0,
				copyright:0,
				start:0,
				move:0,
				content:'Are you sure you finish the task ?',
				showtap:false,
				datalist:[],
				select:0,
				animationData:{}
			};
		},
		onLoad() {
			this.setdate(0);
			this.setdate(1);
			var animation = uni.createAnimation({
			  duration: 300,
				timingFunction: 'ease',
			})
			this.animation = animation
			// animation.scale(2,2).rotate(45).step()
			
			//     this.animationData = animation.export()
			console.log(this.datalist )
		},
		methods:{
			getstr(time){
				var date = new Date(time.a).getMonth();
				var obj = {
					a:{
						day:new Date(time.a).getDate(),
						mon:this.langmon(new Date(time.a).getMonth()+1),
						year:new Date(time.a).getFullYear(),
						week:this.langweek(new Date(time.a).getDay())
					},
					b:{
						day:new Date(time.b).getDate(),
						mon:this.langmon(new Date(time.b).getMonth()+1),
						year:new Date(time.b).getFullYear(),
						week:this.langweek(new Date(time.b).getDay())
					},
					c:{
						day:new Date(time.c).getDate(),
						mon:this.langmon(new Date(time.c).getMonth()+1),
						year:new Date(time.c).getFullYear(),
						week:this.langweek(new Date(time.c).getDay())
					}
				}
				return obj;
			},
			langweek(num){
				var week = num === 0?7:num;
				return this.$t('task_week'+week);
			},
			langmon(num){
				return this.$t('task_mon'+num);
			},
			setdate(index){
				var starttime;
				if(!index){
					starttime = new Date().getTime() + daytime;
					this.select = new Date().getTime();
				}else{
					starttime = this.datalist[0].a;
				}
				var obj = {a:starttime-daytime*3,b:starttime-daytime*2,c:starttime-daytime*1};
				this.datalist.unshift(obj);
			},
			topview(){
					this.showtap = true;
					
			},
			touchstart(e){
				this.start = e.changedTouches[0].clientX;
			},
			touchmove(e){
				this.move = e.changedTouches[0].clientX - this.start;
				this.right = this.copyright - this.move;
				console.log(123)
			},
			touchend(e){
				console.log(456)
				var end = e.changedTouches[0].clientX;
				if(end - this.start>5){
					var right = this.copyright - this.$store.state.windowWidths;
					this.animation.right(right).step();
					this.animationData = this.animation.export()
					setTimeout(()=>{
						this.right = right;
						var idx = parseInt(this.right/this.$store.state.windowWidths);
						if(idx<0){idx = idx*-1}
						// console.log(idx,this.datalist.length)
						if(idx == this.datalist.length-1){
							this.setdate(idx+1);
						}
						this.copyright = this.right;
					},350)
					
				}else if(end - this.start<-5){
					if(this.copyright == 0){
						this.right = 0
					}else{
						var right = this.copyright + this.$store.state.windowWidths;
						this.animation.right(right).step();
						this.animationData = this.animation.export()
						setTimeout(()=>{
							this.right = right;
							this.copyright = this.right;
						},350)
					}
				}else{
					this.right = this.copyright;
				}
				
			}
		}
	}
</script>

<style lang="scss">
	.active{
		border-bottom: 2px solid #2A3954;
	}

</style>
